<template>
  <div class="mv-list">
    <ul class="grid" :class="[store.isFlag ? 'grid-cols-4 gap-8' : 'grid-cols-2 gap-4']" v-if="mvs.length > 0">
      <li v-for="mv in mvs" :key="mv.id" class="w-full h-full cursor-pointer">
        <div class="content">
          <div class="w-full h-full relative">
            <van-image fit="cover" :src="mv.imgurl"/>
            <span class="inline-block i-mdi-play-circle-outline play text-4xl yu-textColor-hover"></span>
          </div>
        </div>
        <span class="title yu-textColor-hover">{{ mv.name }}</span>
      </li>
    </ul>
    <div v-else class="text-center">
      没有MV
    </div>
  </div>
</template>

<script setup>
import {useStore} from "@/store/index";

const store = useStore()
defineProps({
  mvs: Array
})
</script>

<style scoped lang="scss">
.play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
